<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .top {
            width: 100vw;
            height: 10vh;
            background-color: rgb(225, 225, 224);
            display: flex;
            align-items: center;
        }

        .top>input {
            width: 90vw;
            height: 7vh;
            border-radius: 5px;
            margin-left: .8rem;
        }

        .top>img {
            width: 7vw;
            position: absolute;
            right: 1.5rem;
        }

        .top>span {
            position: absolute;
            right: 3.5rem;
        }

        .hang {
            width: 100vw;
            height: 10vh;
            background-color: lightblue;
            display: flex;
            border-top: 1px solid rgb(114, 113, 113);
            border-bottom: 1px solid rgb(108, 108, 108);
        }
        .hang>select{
            border: none;
            flex: 1;
            font-size: 1.3rem;
            font-weight: bold;
            color: rgb(125, 125, 125);
            text-align: right;
            padding: 5px;
        }
        .fang{
            width: 100vw;
            background-color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .fang1{
            width: 90vw;
            height: 25vh;
            display: flex;
            align-items: center;
            border-bottom: 2px solid  #ff8a00;
        }
        .fang1>div:nth-of-type(1){
            flex: 1;
        }
        .fang1>div:nth-of-type(1)>img{
            width: 100%;
        }
        .fang1>div:nth-of-type(2){
            flex: 2;
            background-color: aliceblue;
            padding-left: .8rem;
        }
        .fang1>div:nth-of-type(2)>p{
            font-weight: bold;
            line-height: 2rem;
            font-size: 1rem;
        }
        .fang1>div:nth-of-type(2)>span{
            font-size: .8rem;
            line-height: 1.5rem;
        }
        .fang1>div:nth-of-type(2)>span:nth-of-type(3){
            color: #716f6f;
        }
        .fang1>div:nth-of-type(2)>span:nth-of-type(4){
            color: #ff8a00;

        }
        .fang1>div:nth-of-type(2)>span:nth-of-type(5){
           padding: 2px;
           color:#4f616e ;
        }
        .fang1>div:nth-of-type(2)>span:nth-of-type(6){
           color:#4f616e ;
           padding: 2px;
           margin-left: 15px;
        }
        .fang1:nth-of-type(3){
            border-bottom: none;
        }
    </style>
</head>

<body>
    <div class="big">
        <div class="top">
            <input type="text" placeholder="请输入小区名或商圈名称">
            <span>|</span>
            <img src="./search_03.png" alt="">
        </div>
        <div class="hang">
            <select name="" id="">
                <option value="区域">区域</option>
            </select>
            <select name="" id="">
                <option value="区域">价格</option>
            </select>
            <select name="" id="">
                <option value="区域">房型</option>
            </select>
            <select name="" id="">
                <option value="区域">更多</option>
            </select>
        </div>
        <div class="fang">
            <div class="fang1">
                <div>
                    <img src="./img5.png" alt="">
                </div>
                <div>
                    <p>西便门外大街2室1厅89</p>
                    <span>南北&nbsp;&nbsp;</span><span>高楼层/6层</span><br>
                    <span>签约价格:13244元/平</span><span>1105万</span><br>
                    <span>签约日期:2015年11月10日</span>
                </div>
            </div>
            <div class="fang1">
                <div>
                    <img src="./img6.png" alt="">
                </div>
                <div>
                    <p>金桥国际&nbsp;1室1厅&nbsp;63平</p>
                    <span>南北&nbsp;&nbsp;</span><span>高楼层/6层</span><br>
                    <span>签约价格:13244元/平</span><span>905万</span><br>
                    <span>签约日期:2015年11月10日</span>
                </div>
            </div>
            <div class="fang1">
                <div>
                    <img src="./img7.png" alt="">
                </div>
                <div>
                    <p>花润溪二期&nbsp;2室1厅&nbsp;90</p>
                    <span>南北&nbsp;&nbsp;</span><span>高楼层/6层</span><br>
                    <span>签约价格:13244元/平</span><span>1322万</span><br>
                    <span>签约日期:2015年11月10日</span>
                </div>
            </div>
        </div>
    </div>
</body>

</html>